<template>
	<view class="video-detail">
		<view class="video-player">
			<video :src="videoItem.video?.url" ref="videoes" class="videoes" :poster="videoItem.video?.imgUrl"></video>
		</view>
		<view class="movie-info">
			<view class="info-title">{{videoItem.title}}</view>
			<view class="info-content">
				<view class="content-left">
					<image class="c-pic" mode="" :src="videoItem.user.avatarurl" />
					<view class="c-text">{{videoItem.user.nickName}}</view>
					<image class="c-icon"
						src="https://p0.meituan.net/moviemachine/5aaa710d72c78d6553be83f43bc9e4f3946.png" mode="" />
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'


	const videoItem = ref({})
	onLoad((option) => {
		const item = JSON.parse(decodeURIComponent(option.item));
		videoItem.value = item
		console.log(videoItem.value, 'item');
	})

	const videoes = ref();
	const pauseds = ref();
	const imgNone = ref();

	const playVideo = () => {
		console.log('播放');
		console.log(pauseds.value.$el.style, 'aaaa');
		console.log(videoes.value.play, 'ggg');
		pauseds.value.$el.style.display = 'none'
		imgNone.value.$el.style.display = 'none'
	}
</script>

<style lang="scss">
	.video-detail {
		width: 100%;

		.video-player {
			width: 100%;
			height: 422rpx;
			position: relative;
		}

		.videoes {
			width: 100%;
			height: 422rpx;

			::v-deep .uni-video-cover {
				background-color: rgba(1, 1, 1, 0.2) !important;

			}

			::v-deep .uni-video-cover-duration {
				display: none !important;
			}

			::v-deep .uni-video-cover-play-button {
				border: 2rpx solid #f2f2f2 !important;
				border-radius: 50% !important;
			}
		}

		.movie-info {
			padding: 28rpx 30rpx 30rpx;
			opacity: .9;
			background: #fff;

			.info-title {
				font-size: 30rpx;
				color: #333;
				line-height: 44rpx;
			}

			.info-content {
				margin-top: 16rpx;
				display: flex;
				justify-content: space-between;


				.content-left {
					display: flex;
					justify-content: flex-start;
					align-items: center;
				}

				.c-pic {
					width: 46rpx;
					height: 46rpx;
					border-radius: 100%;
					border: 2rpx solid #fff;
				}

				.c-text {
					font-size: 26rpx;
					color: #333;
					margin: 8rpx 16rpx;
				}

				.c-icon {
					width: 24rpx;
					height: 24rpx;
				}
			}


		}


	}
</style>